<template>
  <div class="index-container">
    <div class="hero">
      <img
        v-if="data.heroImage"
        :src="data.heroImage"
        style="height: 108px"
      >
      <h1
        v-if="data.heroText !== null"
        id="main-title"
      >
        {{ data.heroText || 'Hello' }}
      </h1>

      <p
        v-if="data.description !== null"
        class="description"
      >
        {{ data.description  || 'Welcome to your VuePress site' }}
      </p>
      <el-button
        plain
        class="action-button"
        @click="handleUse"
      >{{data.actionText}}</el-button>

    </div>
    <div
      v-if="data.feature && data.feature.length"
      class="features"
    >
      <div
        v-for="(feature, index) in data.feature"
        :key="index"
        class="feature"
      >
        <h2>{{ feature.title }}</h2>
        <p style="line-height: 2.2;">{{ feature.details }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
export default {
  name: "index",
  data () {
    return {
      data: {
        heroImage: logo,
        heroText: 'Java代码生成器',
        actionText:'开始使用 →',
        description: '抽取若依RuoYi-Vue的代码生成，目前支持Mybatis、Mybatis-plus的后端代码生成，' +
          '前端支持element-ui与vue、Ant Design of Vue以及html的代码，可以自由组合导出预览，' +
          '可以通过导入mysql脚本的方式来创建表进行代码生成，支持数据库结构文档导出至Excel',
        feature:[
          { title : '代码生成', details: '支持多种组合的代码生成，MyBatis、MyBatis-Plus、Element UI-Vue、Andv-Vue、Html灵活组合' },
          { title : 'SQL代码生成', details: '支持MySQL脚本创建数据库表进行代码生成' },
          { title : '数据库字典导出', details: '支持导出数据字典' }
        ]
      }
    }
  },
  methods:{
    handleUse(){
      this.$router.push({ path: "/generate/index", query: { pageNum: this.$route.query.pageNum } })
    }
  }
}
</script>

<style scoped lang="scss">
.index-container{
  margin: 0px auto;
  padding: 128px 168px 20px 168px;
  display: block;

  .hero{
    text-align:center
  }
  .h1{
    font-size:3rem
  }
  .h1, .description, .action{
    margin: 1.8rem auto
  }
  .description{
    max-width:52rem;
    font-size:1.2rem;
    line-height: 1.5;
    color:lighten(#070707, 40%)
  }
  .action-button{
    display:inline-block;
    font-size:1.2rem;
    color: white;
    background-color: #f57070;
    padding:0.8rem 1.6rem;
    border-radius:6px;
    transition: background-color .1s ease;
    box-sizing:border-box;
    &:hover{
    }
  }


  .features{
    border-top: 1px solid #b9b2b4;
    padding: 1.2rem 0;
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: stretch;
    justify-content:space-between;
  }
  .feature{
    flex-grow:1;
    flex-basis:30%;
    max-width:30%;
  }
  .h2{
    font-size:1.4rem;
    font-weight:500;
    border-bottom: none;
    padding-bottom: 0;
    color: palevioletred
  }
}
</style>
